<template>
  <div class="musicplayer">
    <div class="onblur"></div>
    <div class="blur">
      <img :src="picUrl" alt />
    </div>
    <!-- logo -->
    <div class="head">
      <img class="logo" src="../../../public/images/logo.png" alt />
      <div class="user">
        <div class="userLeft">
          <p style="font-size:14px;display:inline">QQ音乐，千万高品质曲库尽享</p>
          <a href="#" class="userBtn">
            <div class="topSp"></div>客户端下载
          </a>
        </div>
        <div class="userRight">
          <div v-if="$store.state.userInfo">
            <img class="userPic" :src="$store.state.userInfo.avatarUrl" alt />
            <a href="#" class="userName">{{$store.state.userInfo.nickname}}</a>
          </div>
          <span>设置</span>
          <a href="#" class="out" @click="exit">退出</a>
        </div>
      </div>
    </div>
    <!-- songlist -->
    <div class="middle" v-show="!isShow">
      <div class="list">
        <div class="listtop">
          <ul style="list-style:none;display:flex;">
            <li>
              <a @click="tip1">
                <div class="sp6" v-show="!love1"></div>
                <div class="sp1" v-show="love1"></div>收藏
              </a>
            </li>
            <li>
              <a @click="tip2">
                <div class="sp2"></div>添加到
              </a>
            </li>
            <li>
              <a @click="tip3">
                <div class="sp3"></div>下载
              </a>
            </li>
            <li>
              <a @click="tip4">
                <div class="sp4"></div>删除
              </a>
            </li>
            <li>
              <a @click="clearAll">
                <div class="sp5"></div>清空列表
              </a>
            </li>
          </ul>
        </div>

        <ul class="botlist">
          <li class="bl1">
            <el-checkbox v-model="allcheck" @change="allChange"></el-checkbox>
          </li>
          <li class="bl2">歌曲</li>
          <li class="bl3">歌手</li>
          <li class="bl4">时长</li>
        </ul>
        <!-- 遍历歌曲在这里 -->
        <div class="listbot">
          <ul class="botlist1" v-for="(item,index) in song" :key="index">
            <li>
              <el-checkbox v-model="item.checked" @change="checkChange($event)"></el-checkbox>
            </li>
            <li class="bl11" v-show="!aplay">{{index+1}}</li>
            <li class="bl11" v-show="aplay">
              <img src="../../../public/images/play.gif" alt />
            </li>

            <li class="bl21">
              <div style="float:left">
                <a href>{{item.name}}</a>
              </div>
              <div class="blsp1"></div>
              <a href="#">
                <div class="blsp2"></div>
              </a>
              <!-- 分享图标 -->
              <div class="icon1"></div>
              <!-- 添加歌单图标 -->
              <div class="icon2"></div>
              <!-- 播放音乐图标 -->
              <!-- 根据是否播放切换图标 -->
              <div class="icon3" v-show="!aplay" :data-index="index" @click="changeplay2"></div>
              <div class="icon31" v-show="aplay" :data-index="index" @click="changeplay2"></div>
            </li>
            <!-- 歌手名称 -->
            <li class="bl31">
              <a href>{{item.ar[0].name}}</a>
            </li>
            <li class="bl41">
              <!-- 歌曲时长 -->
              <div class="BLtime">{{dayjs(item.dt).format('mm:ss')}}</div>
              <!-- 删除图标 -->
              <div class="icon4"></div>
            </li>
          </ul>
        </div>
      </div>
      <div class="song">
        <div class="songPic">
          <!-- 跳转歌曲详情 -->
          <a href="#">
            <img :src="picUrl" />
          </a>
        </div>
        <div class="songMsg">
          <p>歌曲名:{{songName}}</p>
          <p>歌手:{{singer}}</p>
          <p>专辑:{{CD}}</p>
        </div>

        <ul class="songWord" ref="lyricUl2">
          <li
            v-for="(item, i) in lyricsObjArr"
            :style="{color: lyricIndex === i ? 'yellowgreen' : '#ded9d9'}"
            :key="item.uid"
            :ref="'lyric'+i"
          >{{item.lyric}}</li>
        </ul>
      </div>
    </div>
    <!-- 纯净模式 -->
    <div class="middle2" v-show="isShow">
      <ul class="songWord2" ref="lyricUl">
        <li
          v-for="(item, i) in lyricsObjArr"
          :style="{color: lyricIndex === i ? '#31c27c' : '#fff'}"
          :key="item.uid"
          :ref="'lyric'+i"
        >{{item.lyric}}</li>
      </ul>
    </div>
    <!-- player -->
    <audio @timeupdate="timeChange" :src="musicUrl" ref="audio" />
    <div class="player">
      <a href="#">
        <div class="icon5"></div>
      </a>
      <!-- 点击播放暂停按钮 -->
      <a @click="changeplay">
        <div class="icon6" v-show="!play"></div>
        <div class="icon15" v-show="play"></div>
      </a>
      <a href="#">
        <div class="icon7"></div>
      </a>
      <div class="long">
        <div class="longtop">
          <div class="longname">{{songName}}-{{singer}}</div>
          <div
            class="longtime"
          >{{dayjs(songTime*1000).format('mm:ss')}}/{{dayjs(song[0].dt).format('mm:ss')}}</div>
        </div>
        <div class="longbot" ref="long">
          <div class="white" ref="white">
            <div class="ball"></div>
          </div>
        </div>
      </div>
      <a href="#">
        <div class="icon8"></div>
      </a>
      <a href="#">
        <div class="icon9"></div>
      </a>
      <a href="#">
        <div class="icon10"></div>
      </a>
      <a href="#">
        <div class="icon11"></div>
      </a>
      <!-- 切换纯净模式 -->
      <a @click="changeShow">
        <div class="icon12" v-show="isShow"></div>
        <div class="icon14" v-show="!isShow"></div>
      </a>
      <a href="#">
        <div class="icon13"></div>
      </a>
      <div class="short">
        <div class="white2">
          <div class="ball2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getSongWord,
  getSongMsg,
  getSongUrl,
  getCD,
} from "../../api/musicPlay";
import dayjs from "dayjs";
export default {
  name: "musicPlayer",
  data() {
    return {
      isShow: true,
      play: false,
      aplay: false,
      songIndex: "",
      song: [],
      CD: "",
      CDsong: [],
      picUrl: "",
      allcheck: false,
      q: [],
      love1: true,
      lyric: [],
      // 处理好的歌词
      lyricsObjArr: [],
      // 音频链接
      musicUrl: "",
      songName: "",
      singer: "",
      urlId: "",
      songId: "",
      lyricIndex: 0,
      songTime: "",
    };
  },
  props: {},
  methods: {
    timeChange(e) {
      const currentTime = Math.floor(e.target.currentTime);
      this.lyricsObjArr.forEach((item, index) => {
        if (currentTime > Math.floor(item.time)) {
          // console.log(this.$refs[`lyric${index}`]);
          this.lyricIndex = index;
          this.$refs.lyricUl.style.transform = `translateY(${
            370 - 58 * (index + 1)
          }px)`;
          //  this.$refs.lyricUl2.style.transform = `translateY(${100 - (34 * (index + 1))}px)`
        }
      });
      this.songTime = currentTime;
      this.$refs.white.style.width =
        (this.songTime / this.song[0].dt) * 950 * 1000 + "px";
      if (this.songTime === this.song[0].dt) {
        this.$refs.audio.pause();
        this.aplay = false;
      }
    },
    // 纯净模式切换
    changeShow() {
      this.isShow = !this.isShow;
    },
    //    播放暂停切换
    changeplay() {
      this.play = !this.play;
      if (this.play) {
        //    播放音乐
        this.$refs.audio.play();
        this.aplay = true;
      } else {
        //    暂停音乐
        this.$refs.audio.pause();
        this.aplay = false;
      }
    },
    async changeplay2() {
      this.play = !this.play;
      if (this.play) {
        //    播放音乐
        this.$refs.audio.play();
        this.aplay = true;
      } else {
        //    暂停音乐
        this.$refs.audio.pause();
        this.aplay = false;
      }
    },
    //    清空列表
    clearAll() {
      this.$confirm("确定要清空列表？", "QQ音乐   ", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "clearTip",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已清空列表!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清空",
          });
        });
    },
    //    点击其他按钮提示
    tip1() {
      if (this.q.length == 0) {
        this.$message("请选择歌曲");
      } else {
        this.love1 = !this.love1;
      }
    },
    tip2() {
      this.$message("请选择歌曲");
    },
    tip3() {
      if (this.q.length == 0) {
        this.$message("请选择歌曲");
      } else {
        this.$confirm(
          "下载歌曲需要在QQ音乐客户端操作!使用QQ音乐客户端获得高品质完整体验",
          "QQ音乐   ",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            customClass: "clearTip",
            type: "warning",
          }
        )
          .then(() => {
            this.$message({
              type: "success",
              message: "正在下载!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消下载",
            });
          });
      }
    },
    tip4() {
      this.$message("请选择歌曲");
    },
    //    点击外面checkbox,选中全部或取消全部checkbox
    allChange() {
      this.song.filter((item) => {
        return (item.checked = this.allcheck);
      });
    },
    //    如果全选则选中外面的checkbox，否则不选中
    checkChange() {
      this.q = [];
      this.q.push(
        this.song.map((item) => {
          return item.checked;
        })
      );
      if (
        this.q[0].every((item) => {
          return item;
        })
      ) {
        this.allcheck = true;
      } else {
        this.allcheck = false;
      }
    },
    // 格式化歌词的时间 转换成 sss:ms
    formatLyricTime(time) {
      const regMin = /.*:/;
      const regSec = /:.*\./;
      const regMs = /\./;

      const min = parseInt(time.match(regMin)[0].slice(0, 2));
      let sec = parseInt(time.match(regSec)[0].slice(1, 3));
      const ms = time.slice(
        time.match(regMs).index + 1,
        time.match(regMs).index + 3
      );
      if (min !== 0) {
        sec += min * 60;
      }
      return Number(sec + "." + ms);
    },
    // 分割时间和歌词
    tiemWordOPen() {
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/;
      this.lyric.forEach((item) => {
        if (item === "") return;
        const obj = {};
        const time = item.match(regTime);
        obj.lyric =
          item.split("]")[1].trim() === "" ? "" : item.split("]")[1].trim();
        obj.time = time
          ? this.formatLyricTime(time[0].slice(1, time[0].length - 1))
          : 0;
        obj.uid = Math.random().toString().slice(-6);
        if (obj.lyric === "") {
          console.log("这一行没有歌词");
        } else {
          this.lyricsObjArr.push(obj);
        }
      });
    },
    //退出
    exit() {
      this.$router.go(-1);
    },
  },
  created() {
    this.dayjs = dayjs;
  },
  async mounted() {
    // 获取歌曲信息

    const { songs } = await getSongMsg(this.$route.query.songId);
    console.log(songs);
    this.song = songs;
    this.picUrl = songs[0].al.picUrl;
    this.songName = songs[0].al.name;
    this.singer = songs[0].ar[0].name;
    //获取歌词
    const { lrc } = await getSongWord(songs[0].id);
    const regNewLine = /\n/;
    this.lyric = lrc.lyric.split(regNewLine);
    // 分割时间和歌词
    this.tiemWordOPen();
    // 获取专辑id
    const cdId = this.song[0].al.id;
    console.log(cdId);
    // 获取专辑
    const album = await getCD(cdId);
    this.CDsong = album.songs;
    // 专辑名
    this.CD = album.album.type;
    // 获取音频url
    const { data } = await getSongUrl(songs[0].id);
    this.musicUrl = data[0].url;
  },
};
</script>
<style>
* {
  list-style: none;
  margin: 0;
  padding: 0;
}
.musicplayer {
  /* background-size: 100% 100%; */
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: hsla(0, 0%, 88.2%, 0.8);
}
.onblur {
  background: rgba(0, 0, 0, 0.4);
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -999;
}
.blur img {
  background-repeat: repeat-y;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;

  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -99;
  filter: blur(85px);
}
/* 整个头部 */
.head {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}
/* 右上角用户部分 */
.user {
  display: flex;
  color: #fff;
}
.userRight {
  display: flex;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  color: hsla(0, 0%, 88.2%, 0.8);
}
/* 客户端下载 */
.userBtn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border: 0;
  background-color: #3ac984;
  color: #fff;
  font-size: 15px;
  height: 28px;
  width: 92px;
  padding: 0 17px;
  line-height: 26px;
  border-radius: 28px;
  margin-left: 6px;
}
.userBtn:hover {
  background-color: #2caf6f;
}
/* 按钮里的精灵图 */
.topSp {
  background-image: url(../../../public/images/top.png);
  background-position: 40px 23px;
  width: 13px;
  height: 24px;
  margin-right: 4px;
  float: left;
}
/* 用户头像 */
.userPic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-left: 26px;
}
/* 用户名 */
.userName {
  text-decoration: none;
  color: hsla(0, 0%, 88.2%, 0.8);
  margin-right: 15px;
  margin-left: 5px;
}
/* 退出 */
.out {
  color: rgba(255, 255, 255, 0);
  text-decoration: none;
  margin-right: 20px;
  margin-left: 15px;
}
.user:hover .out {
  color: hsla(0, 0%, 88.2%, 0.8);
}
/* 左上角logo */
.logo {
  width: 78px;
  height: 21px;
  margin-left: 20px;
}
/* 中间部分 */
.middle,
.middle2 {
  width: 85%;
  margin: 0 auto;
  padding-top: 5%;
}
.middle {
  display: flex;
}
.middle2 {
  height: 700px;
  margin: 0 auto;
  overflow: hidden;
  position: absolute;
  z-index: -99;
}
.middle2 ul li {
  font-size: 22px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  position: relative;
  z-index: -69;
}
.list {
  width: 81%;
  /* background-color: salmon; */
}
.listtop ul li {
  width: 122px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #c9c9c9;
  text-align: center;
  border: 1px solid #a2a2a2;
  border-radius: 2px;
  margin-right: 6px;
  position: relative;
}
.listtop ul li a {
  text-decoration: none;
  color: #c9c9c9;
}
.listtop ul li:hover {
  color: #fff;
  border: 1px solid #fff;
}
.listtop ul li:hover .sp1 {
  background-image: url(../../../public/images/top.png);
  background-position: 140px 316px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 26px;
  top: 11px;
}
.sp1 {
  background-image: url(../../../public/images/top.png);
  background-position: 140px 336px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 26px;
  top: 11px;
}
.sp6 {
  background-image: url(../../../public/images/top.png);
  background-position: 400px 256px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 26px;
  top: 11px;
}
.listtop ul li:hover .sp2 {
  background-image: url(../../../public/images/top.png);
  background-position: 180px 316px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 18px;
  top: 11px;
}
.sp2 {
  background-image: url(../../../public/images/top.png);
  background-position: 180px 336px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 18px;
  top: 11px;
}
.listtop ul li:hover .sp3 {
  background-image: url(../../../public/images/top.png);
  background-position: 160px 95px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 27px;
  top: 11px;
}
.sp3 {
  background-image: url(../../../public/images/top.png);
  background-position: 160px 115px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 27px;
  top: 11px;
}
.listtop ul li:hover .sp4 {
  background-image: url(../../../public/images/top.png);
  background-position: 100px 316px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 26px;
  top: 10px;
}
.sp4 {
  background-image: url(../../../public/images/top.png);
  background-position: 100px 336px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 26px;
  top: 10px;
}
.listtop ul li:hover .sp5 {
  background-image: url(../../../public/images/top.png);
  background-position: 80px 316px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 13px;
  top: 10px;
}
.sp5 {
  background-image: url(../../../public/images/top.png);
  background-position: 80px 336px;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  float: left;
  position: absolute;
  left: 13px;
  top: 10px;
}
.listbot {
  width: 92%;
  height: 600px;
  overflow: auto;
  font-size: 14px;
  color: hsla(0, 0%, 88.2%, 0.8);
}
.botlist {
  display: flex;
  height: 50px;
  line-height: 50px;
  color: hsla(0, 0%, 88.2%, 0.8);
  margin-top: 30px;
}
.bl2 {
  width: 57%;
  padding-left: 36px;
}
.bl3 {
  width: 24%;
}

.botlist1 {
  display: flex;
  height: 50px;
  line-height: 50px;
}
.icon1 {
  display: none;
  width: 36px;
  height: 36px;
  /* background-color: rgb(80, 80, 79); */
  position: absolute;
  right: 15px;
  margin-top: 7px;
}
.botlist1:hover .bl21 .icon1 {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 120px 280px;
  width: 36px;
  height: 36px;
}
.botlist1:hover .bl21 .icon1:hover {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 80px 280px;
  width: 36px;
  height: 36px;
}
.icon31 {
  display: none;
  width: 36px;
  height: 36px;

  position: absolute;
  right: 107px;
  margin-top: 7px;
}
.botlist1:hover .bl21 .icon31 {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 120px 120px;
  width: 36px;
  height: 36px;
}
.botlist1:hover .bl21 .icon31:hover {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 80px 120px;
  width: 36px;
  height: 36px;
}
.icon2 {
  display: none;
  width: 36px;
  height: 36px;
  position: absolute;
  right: 61px;
  margin-top: 7px;
}
.botlist1:hover .bl21 .icon2 {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 120px 240px;
  width: 36px;
  height: 36px;
}
.botlist1:hover .bl21 .icon2:hover {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 80px 240px;
  width: 36px;
  height: 36px;
}
.icon3 {
  display: none;
  width: 36px;
  height: 36px;
  /* background-color: rgb(80, 80, 79); */
  position: absolute;
  right: 107px;
  margin-top: 7px;
}
.botlist1:hover .bl21 .icon3 {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 120px 320px;
  width: 36px;
  height: 36px;
}
.botlist1:hover .bl21 .icon3:hover {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 80px 320px;
  width: 36px;
  height: 36px;
}
.bl11 {
  text-align: right;
  width: 2%;
  padding-right: 10px;
}
.bl12 {
  text-align: right;
  width: 2%;
  padding-right: 10px;
}
.bl21 {
  width: 62%;
  position: relative;
}
.bl21 a {
  text-decoration: none;
  color: hsla(0, 0%, 88.2%, 0.8);
}
.bl21 a:hover {
  color: #fff;
}
.active {
  color: #fff;
}
.bl31 {
  width: 26%;
}
.bl31 a {
  text-decoration: none;
  color: hsla(0, 0%, 88.2%, 0.8);
}
.bl31 a:hover {
  color: #fff;
}
.blsp1 {
  background-image: url(../../../public/images/top.png);
  background-position: 120px 56px;
  width: 34px;
  height: 16px;
  float: left;
  margin: 17px 4px 0 5px;
}
.blsp2 {
  background-image: url(../../../public/images/top.png);
  background-position: 160px 56px;
  width: 34px;
  height: 16px;
  float: left;
  margin: 17px 4px 0 5px;
}
.botlist1:hover .BLtime {
  display: none;
}
.icon4 {
  display: none;
}
.botlist1:hover .icon4 {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 120px 160px;
  width: 36px;
  height: 36px;
  margin-top: 10px;
}
.botlist1:hover .icon4:hover {
  display: block;
  background-image: url(../../../public/images/show2.png);
  background-position: 80px 160px;
  width: 36px;
  height: 36px;
  margin-top: 10px;
}
/* 右边歌曲图片，歌曲信息歌词内容 */
.song {
  width: 19%;
  height: 100%;
  overflow: hidden;
}
.songPic img {
  width: 186px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.songMsg {
  color: hsla(0, 0%, 88.2%, 0.8);
  text-align: center;
  font-size: 14px;
}
.songMsg p {
  margin: 10px 0;
}
.songWord {
  width: 100%;
  text-align: center;
  height: 320px;
  overflow: auto;
  margin-top: 50px;
  color: hsla(0, 0%, 88.2%, 0.8);
  /* padding-top: 160px; */
}
.songWord li {
  font-size: 14px;
  height: 34px;
  line-height: 34px;
}
.songWord li:first-child {
  margin-top: 130px;
}
.songWord2 {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: -80;
  /* margin-top: 370px; */
  color: hsla(0, 0%, 88.2%, 0.8);
}
.isgreen2,
.isgreen {
  color: #3ac984;
}
::-webkit-scrollbar {
  display: none;
}
.word {
  width: 100px;
  background-color: red;
  height: 1000px;
}
/* 播放器部分 */
.player {
  width: 85%;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 70px;
  display: flex;
}
.icon5 {
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 970px;
  width: 20px;
  height: 20px;
  margin-right: 50px;
  margin-top: 4px;
}
.icon6 {
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 1000px;
  width: 21px;
  height: 29px;
}
.icon15 {
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 103px 1000px;
  width: 21px;
  height: 29px;
}
.icon7 {
  margin-left: 50px;
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 948px;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}
.long {
  width: 950px;
  margin-left: 50px;
}
.longtop {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  color: hsla(0, 0%, 88.2%, 0.8);
}
.longname:hover {
  color: #fff;
}
.longbot {
  width: 100%;
  height: 3px;
  margin-top: 6px;
  background-color: rgba(177, 177, 177, 0.5);
}
.white {
  height: 3px;
  width: 0px;
  background-color: #fff;
  position: absolute;
}
.ball {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: -3px;
}
.icon8 {
  margin-left: 40px;
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 798px;
  width: 28px;
  height: 28px;
  margin-top: 4px;
}
.icon9 {
  margin-left: 15px;
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 906px;
  width: 28px;
  height: 24px;
  margin-top: 6px;
}
.icon10 {
  margin-left: 15px;
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 883px;
  width: 28px;
  height: 27px;
  margin-top: 5px;
}
.icon11 {
  margin-left: 15px;
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 600px;
  width: 28px;
  height: 27px;
  margin-top: 8px;
}
/* 12和14是点击切换按钮 */
.icon12 {
  margin-left: 15px;
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 718px;
  width: 78px;
  height: 26px;
  margin-top: 8px;
}
.icon14 {
  margin-left: 15px;
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 689px;
  width: 78px;
  height: 27px;
  margin-top: 8px;
}
/* 喇叭 */
.icon13 {
  margin-left: 15px;
  background-image: url(../../../public/images/playCtr1.png);
  background-position: 132px 858px;
  width: 28px;
  height: 27px;
  margin-top: 8px;
}
.short {
  width: 7%;
  height: 3px;
  margin-top: 18px;
  background-color: rgba(177, 177, 177, 0.5);
  margin-left: 10px;
}
.white2 {
  height: 3px;
  width: 7%;
  background-color: #fff;
  position: absolute;
}
.ball2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: -3px;
}
.clearTip .el-message-box__header {
  text-align: center;
  margin: 20px 0;
}
</style>